<template>
  <div class="container">
    <div class="searchForm">
      <el-form ref="wlForm" :model="form" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item style="width:100%" label="申请时间">
              <!-- <el-input v-model="form.filter.fbsj"></el-input> -->
              <div style="display:flex;width:100%">
                <el-date-picker
                  v-model="form.filter.fbkssj"
                  type="date"
                  placeholder="开始日期"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsStart"
                ></el-date-picker>
                <span style="margin: 0 10px">至</span>
                <el-date-picker
                  v-model="form.filter.fbjssj"
                  type="date"
                  placeholder="结束日期"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsEnd"
                ></el-date-picker>
              </div>
              <!-- <el-date-picker
                style="width:100%"
                v-model="getTimeData"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dataChange"
              ></el-date-picker>-->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width:100%" label="审批状态">
              <el-select
                style="width:100%"
                v-model="form.filter.spzt"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in stateList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.filter.gjc" clearable>
                <el-button @click="keywordsClick" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="row-end">
            <el-button type="primary" @click="changePageNum(1)">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tabs-lb">
      <!-- <span>我的申请</span> -->
      <el-radio-group class="btn-operation" v-model="switchState">
        <el-radio-button :label="true">列表</el-radio-button>
        <el-radio-button :label="false">卡片</el-radio-button>
      </el-radio-group>
      <!-- <button @click="switchChange" v-if="switchState" class="btn_operation_add">图形展示</button>
      <button @click="switchChange" v-else class="btn_operation_add">表格展示</button>-->
      <button @click="addSq" class="btn_operation_add">
        <img src="~@/assets/img/grzx/add.png" alt />
        新增申请
      </button>
    </div>
    <!-- 能力列表 -->
    <div v-if="!switchState">
      <div class="table-list">
        <nl-card
          class="nl-card"
          v-for="item in tableData"
          :key="item.jkbh"
          :data="item"
          type="wdsq"
          @clickRow="clickRow"
        ></nl-card>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          @size-change="changePageSize"
          @current-change="changePageNum"
          :current-page="form.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div class="table-lists" v-else>
      <el-table :data="tableData" border style="min-height:550px" stripe>
        <!-- <el-table-column
          prop="sqdwmc"
          label="申请单号"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>-->
        <el-table-column prop="jkmc" label="能力名称" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="jkms" label="能力概述" align="center" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="jkfbdwmc" label="发布单位" align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="yyxt" label="应用系统" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="sqrymc" label="申请人" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="sqdwmc" label="申请单位" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dysj" label="申请时间" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="spzt" label="审批状态" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div
              :class="scope.row.spzt === '待授权' ? 'color-skyblue':''"
              v-if="scope.row.spzt === '待授权'"
            >{{scope.row.spzt}}</div>
            <div
              :class="scope.row.spzt === '拒绝' ? 'color-red':''"
              v-if="scope.row.spzt === '拒绝'"
            >{{scope.row.spzt}}</div>
            <div
              :class="scope.row.spzt === '通过' ? 'color-green':''"
              v-if="scope.row.spzt === '通过'"
            >{{scope.row.spzt}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="ak" label="AK" align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <!-- <el-table-column prop="sk" label="SK" align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <!-- <el-table-column prop="jrdycs" label="今日调用次数" align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <!-- <el-table-column prop="zdycs" label="总调用次数" align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="handleXz(scope.row)"
              v-if="scope.row.sfkcs === 'Y' && scope.row.jkwd"
            >文档下载</el-link>
            <el-link
              type="primary"
              @click="handleCs(scope.row)"
              v-if="scope.row.sfkcs === 'Y' && scope.row.jkwd"
            >在线测试</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page marTop">
        <el-pagination
          background
          @size-change="changePageSize"
          @current-change="changePageNum"
          :current-page="form.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import dyglService from "@/api/dygl";
import nlCard from "@/components/nl-card.vue";
export default {
  components: { nlCard },
  data() {
    return {
      tableData: [],
      // 申请日期
      getTimeData: '',
      form: {
        pageNum: 1,
        pageSize: 10,
        filter: {
          kssj: "",
          jssj: "",
          spzt: "",
          gjc: "",
          // jkmc: "",
          // jkms: "",
        },
      },
      total: 0,
      stateList: [
        {
          label: '待授权',
        },
        {
          label: '通过',
        },
        {
          label: '拒绝',
        },
      ],
      switchState: false,
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.form.filter.fbjssj;
          if (endDateVal) {
            return (
              time.getTime() > new Date(endDateVal).getTime()
            );
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.form.filter.fbkssj;
          if (beginDateVal) {
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
    };
  },
  mounted() {
    // 分页
    this.changePageNum(1);
    // 获取请求统计数据
    this.getQqtjsj();
    // 获取转发统计数据
    this.getZftjsj();
    // 获取调用量统计数据
    this.getDyltjsj();
  },
  methods: {
    /*
     * 获取申请列表
     */
    getSqList() {
      const params = { ...this.form };
      dyglService
        .queryWddy(params)
        .then((res) => {
          this.tableData = res.list;
          this.total = res.total;
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },

    /*
     * 分页
     */
    changePageNum(val) {
      this.form.pageNum = val;
      this.getSqList();
    },

    /*
     * 分页
     */
    changePageSize(val) {
      this.form.pageSize = val;
      this.form.pageNum = 1;
      this.getSqList();
    },

    /*
     * 跳转服务验证
     */
    clickRow(type, data) {
      // console.log(type, data);
      if (type === "editor") {
        this.$router.push({
          path: "/zxts",
          query: {
            cs: data.jkbh,
          },
        });
      } else if (type === "look") {
        this.$router.push({
          path: "/nlxq",
          query: {
            cs: data.jkbh,
          },
        });
      }
    },

    /*
     * 获取请求统计数据
     */
    getQqtjsj() {
      //
    },

    /*
     * 获取转发统计数据
     */
    getZftjsj() {
      //
    },

    /*
     * 获取调用量统计数据
     */
    getDyltjsj() {
      //
    },

    /*
     * 跳转能力申请
     */
    addSq() {
      this.$router.push("/nlsq");
    },
    // switchChange() {
    //   this.switchState = !this.switchState;
    // },
    // 在线测试
    handleCs(data) {
      this.clickRow("editor", data);
      // this.$router.push({
      //   path: "/zxts",
      //   query: {
      //     cs: jkbh,
      //   },
      // });
    },
    // 文档下载
    handleXz(data) {
      // console.log(data.jktb);
      window.open(window.BASEURL + "/fpi/wjfw/download?wjbh=" + data.jktb);
    },
    // 日期发生变化的时候
    dataChange(val) {
      if (!val) {
        this.form.filter.kssj = '';
        this.form.filter.jssj = '';
      } else {
        this.form.filter.kssj = val[0];
        this.form.filter.jssj = val[1];
      }
    },
    // 点击搜索关键字
    keywordsClick() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        filter: {
          gjc: this.form.filter.gjc,
        },
      };
      dyglService
        .queryWddy(params)
        .then((res) => {
          this.tableData = res.list;
          this.total = res.total;
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    }
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  border: 1px solid #cecece;
  background-color: #fff;
  padding: 25px 20px 20px 20px;
  .searchForm {
    border-bottom: 1px solid #cecece;
    padding-bottom: 5px;
    .row-end {
      text-align: right;
    }
  }
  .tabs-lb {
    margin-top: 10px;
    border-bottom: none;
  }
  .table-list {
    width: 100%;
    // margin-top: 20px;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    .nl-card {
      margin: 0 20px 20px 0;
      // width: calc(33.33% - 13.33px);
      width: 49.3%;
      // float: left;
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }

  .table-lists {
    margin-top: 10px;
  }
  // .nl-card {
  //   width: 100%;
  //   height: 150px;
  //   margin-bottom: 20px;
  // }
  .page {
    // position: absolute;
    // left: 40%;
    // bottom: 5%;
    margin-top: 20px;
    text-align: center;
  }
}

.marTop {
  margin-top: 15px;
}

.btn-operation {
  float: right;
  margin-top: 10px;
}

.color-red {
  color: #f76767;
}

.color-skyblue {
  color: #0eb0ec;
}

.color-green {
  color: #38b659;
}
</style>
